One cohesive language for every page, component, and interaction. Monochrome, typographic-first, and quietly precise. This document is the single source of truth for tokens, type, color, spacing, components, and motion.
01Brand
Calm, premium, and unmistakably deliberate.
01
Typography is the interface
Hierarchy is built with weight, scale, and space — not decoration.
02
Monochrome discipline
One ink, one paper, graded greys. Color is reserved, never decorative.
03
Space is a material
Whitespace does the work most borders and boxes try to do.
04
Motion with a reason
Every animation reveals content, gives feedback, or shows state.
05
Detail earns trust
Alignment, optical spacing, and consistency are the whole point.
06
One playful signature
The cursor-tracking eyes are the single moment of warmth. Just one.
Personality
Editorial and considered, like a well-set magazine. Confident without shouting. Precise without being cold. A designer who sweats the small type.
Tone of voice
Plain, specific, and honest. Short sentences. Real numbers over adjectives. Says the caveat out loud. Never uses filler verbs or hype.
Motion philosophy
Slow in, settle gently. Reveals over reactions. Nothing loops for attention. Everything respects reduced-motion and collapses to still.
02Typography
Aa
Archivo Expanded
Display accents · 600–800
Aa
Work Sans
Body · secondary · 400–700
李欣
Noto Sans SC
Chinese · 400–700
A1
Space Mono
Headings / labels / numerals · 100–700
Display
Space Mono 100 · 45px · lh .94 · -.02em
Heading 1
Space Mono 100 · 45px · lh .94
Heading 2
Space Mono 100 · 45px · lh 1.02
Heading 3
Space Mono 100 · 45px · lh 1.08
Body Large — used for ledes and intros. Comfortable measure, generous leading.
Work Sans 400 · 18px · lh 1.7
Body — the workhorse for paragraphs and case-study prose. Max measure 60–65ch for readability.
Work Sans 400 · 15px · lh 1.75
Body Small — meta rows, secondary detail, captions in prose.
Work Sans 400 · 13px · lh 1.7
Label / Eyebrow
Space Mono · 11px · .16–.22em · uppercase
Caption — Fig. 01
Work Sans · 10.5px · .14em · uppercase
Responsive scaling uses clamp(min, vw, max) so type fluidly interpolates between mobile and desktop with no breakpoint jumps. Display and headings scale most; body scales the least to protect readability.
03Color
Ink / Primary
#141416 · text, accent
Ink 2 / Body
#3a3a3f · paragraphs
Muted
#54545b · secondary
Muted 2 / Labels
#86868d · tertiary
Surface
#f4f4f6 · footer, cards
Paper
#fbfbfc · page bg
Border
rgba(20,20,22,.13)
Selection
#bcdafc / #1b7af7
Success
#2f6b4f
Warning
#8a6d2f
Error
#8a3a3a
Hover uses Ink for links and labels. Selection blue mimics native iOS text selection and is the only chromatic color in the product — reserved for the About "Quote of the day" moment. Status colors are desaturated to sit inside the monochrome palette and used sparingly.
04Spacing — 8px base
space-1 · 4
space-2 · 8
space-3 · 12
space-4 · 16
space-6 · 24
space-8 · 32
space-10 · 40
space-12 · 48
space-16 · 64
space-20 · 80
space-30 · 120
All padding, gaps, and margins are multiples of 8 (with 4 as the single half-step). Section rhythm uses the large end of the scale via clamp(48px, 8vw, 104px).